{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/brand_info.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/basic.min.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/dropzone.min.css' %}" type="text/css" rel="stylesheet">
    <style>
    .standard_show_box{
        margin-left: 100px;
        width: 200px;
        height: 200px;
        float: left;
        border: none;
        border-left: 1px solid #000000;
        padding-left: 10px;
    }
    .standard_show_box > img{
        width: 100%;
    }
    </style>
{% endblock %}



{% block content %}
    <div class="inner wrp">
        <div class="page_nav">
            <a href="{% url 'smErp:manage' %}" class="jsUrlLink" data-url="{% url 'smErp:manage' %}" target="_self">管理中心</a>
            <span class="gap">/</span>
            <a href="{% url 'smErp:product_info' product.id %}" class="jsUrlLink" data-url="{% url 'smErp:product_info' product.id %}" target="_self">产品信息</a>
            <span class="gap">/</span>
            修改资料
        </div>
        <div class="container_box cell_layout">
            <div class="processor" id="process">
                <ol>
                    <li id="set1" class="current size1of1">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">1</i>
                            <h4>修改资料</h4>
                        </div>
                    </li>
                    <li id="set2" class="size1of2 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>提交成功</h4>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="step_panel text_padding">
                <div class="app_create_box app" id="step1">
                    <form class="form layui-form" id="form" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">产品名称</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="name" id="name" class="frm_input" type="text" value="{{ product.name }}">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label frm_select_label">产品分类</label>
                            <select id="type" class="frm_select_box" value="" name="type" lay-ignore>
                                    {% for type in product_types %}
                                        {% if type.0 == product.type %}
                                            <option value ="{{ type.0 }}" selected="selected" class="frm_select button">{{ type.1 }}</option>
                                        {% else %}
                                            <option value ="{{ type.0 }}" class="frm_select button">{{ type.1 }}</option>
                                        {% endif %}
                                    {% endfor %}
                            </select>
                            {#                            </div>#}
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">功能定位</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="pfunction" id="pfunction" class="frm_textarea" maxlength="800">{{ product.function }}</textarea>
                                </span>
                            </div>
                        </div>


                        <div class="frm_control_group">
                            <label for="" class="frm_label">适用人群</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="suitable" id="suitable" class="frm_textarea" maxlength="800">{{ product.suitable }}</textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">不适用人群</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="not_suitable" id="not_suitable" class="frm_textarea" maxlength="800">{{ product.not_suitable }}</textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">注意事项</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="attention" id="attention" class="frm_textarea" maxlength="800">{{ product.attention }}</textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">客服热线</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="hotline" id="hotline" class="frm_textarea" maxlength="800">{{ product.hotline }}</textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">客服信息</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="service_info" id="service_info" class="frm_textarea" maxlength="800">{{ product.service_info }}</textarea>
                                </span>

                            </div>
                        </div>
                        <div class="frm_control_group ">
                            <label for="" class="frm_label">生产流程展示</label>
                            <div class="frm_controls">
                                <img id="workflows_box" style="width: 150px;height: 150px;margin-top: 20px;" src="{{ product.workflows }}" alt="logo" onclick="upload_workflows_img()">
                            </div>

                            <div class="frm_controls" style="display: none;">
                                <div class="upload_wrp">
                                    <!--文件上传-->
                                    <div class="upload_box has_demo">
                                        <div id="workflows_img" class="dropzone">
                                            <div class="am-text-success dz-message">
                                                选择文件
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">生产执行标准</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="standard" id="standard" class="frm_textarea" maxlength="800">{{ product.standard }}</textarea>
                                </span>

                            </div>
                        </div>
                        <div class="frm_control_group ">
                            <label for="" class="frm_label">执行标准附件</label>
                            <div class="frm_controls">
                                <img id="standard_pic_box" style="width: 150px;height: 150px;margin-top: 20px;" src="{{ product.standard_pic }}" alt="image" onclick="upload_standard_img()">
                            </div>

                            <div class="frm_controls" style="display: none;">
                                <div class="upload_wrp">
                                    <!--文件上传-->
                                    <div class="upload_box has_demo">
                                        <div id="standard_pic_img" class="dropzone">
                                            <div class="am-text-success dz-message">
                                                选择文件
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">产品图片</label>
                            <div class="frm_controls">
                                <div class="upload_wrp">
                                    <!--文件上传-->
                                    <div class="upload_box has_demo">
                                        <div id="dropz_product" class="upload_box_drop dropzone">
                                            <div class="am-text-success dz-message">
                                                将文件拖拽到此处<br>或点此打开文件管理器选择文件
                                            </div>
                                        </div>
                                    </div>
                                </div>

{#                                <div class="upload_wrp">#}
{#                                    <!--文件上传-->#}
{#                                    <div class="upload_box has_demo">#}
{#                                        <div class="standard_show_box dropzone">#}
{#                                            <img src="{{ product.standard_pic }}">#}
{#                                            <img src="{{ product.standard_pic }}">#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </div>#}

                            </div>
                        </div>

                        <div class="layui-form-item" pane="">
                            <label class="frm_label">选择原材料</label>
                            <div class="layui-input-block">
                                {% for material in user_info.smerpmaterial_set.all %}
                                    {% if material.id in product_material_ids %}
                                        <input type="checkbox" name="material" lay-skin="primary" checked title="{{ material.name }}" value="{{ material.id }}">
                                    {% else %}
                                        <input type="checkbox" name="material" lay-skin="primary" title="{{ material.name }}" value="{{ material.id }}">
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>

                        <div class="tool_bar border with_form">
                            <a href="javascript:void(0);" class="btn btn_primary jsSendBt" id="productBtn">提交</a>
                        </div>
                    </form>
{#                    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>#}
                </div>

                <div class="app_create_box result" id="step2" style="display:none">
                    <div class="page_msg simple default">
                        <div class="inner group">
                            <span class="msg_icon_wrp">
                                <i class="icon_msg success"></i>
                            </span>
                            <div class="msg_content">
                                <h4>您的产品修改信息已成功提交，预计在3天内完成审核</h4>
                                <p class="spacing">
                                    <a href="{% url 'smErp:manage' %}" data-url="{% url 'smErp:manage' %}" target="_self" class="btn btn_primary jsUrlLink">查看管理中心</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script src="{% static 'smErp/assets/dropzone/dropzone.min.js' %}"></script>
    <script>
        layui.use(['form'], function(){ var form = layui.form });
        // 存储上传的图片
        var upload_imgs = {} ;
        var id = 1;

        var workflows_obj = {} ;
        var standard_obj = {} ;
        $("#email").blur(function(){
{#           alert("hello world");#}
            var email = $("#email").val();
{#            alert(email);#}
            if(!email){
{#                alert("hellow");#}
                $("#email-msg").css("color","red");
                $("#email-msg").html("请输入邮箱地址");
                $("#email-msg").show();
            }
        });

        Dropzone.autoDiscover = false;
        $("#workflows_img").dropzone({
            url: "{% url 'smErp:image_upload' %}",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            dictRemoveFile:"删除",
            maxFiles: 1,
            maxFilesize: 5,
            acceptedFiles: "image/*",
            init: function() {
                workflows_obj = this;
                this.on("success", function(file, data) {
                    console.log("File " + file.name + "uploaded");
                    var logo_obj = $("<input id='workflows' name='workflows' style='display:none;' value='" + data.img_url + "' readonly/>");
                    $("#workflows_img").append(logo_obj);
                    $("#workflows_box").attr("src", data.img_url);
                    file.id = id;        // 换成服务端唯一的索引，可以后面删除对应的input
                    upload_imgs[file.id] = logo_obj;
                    id += 1;
                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                    upload_imgs[file.id].remove();
                });
            }
        });

        $("#standard_pic_img").dropzone({
            url: "{% url 'smErp:image_upload' %}",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            dictRemoveFile:"删除",
            maxFiles: 1,
            maxFilesize: 5,
            acceptedFiles: "image/*",
            init: function() {
                standard_obj = this ;
                this.on("success", function(file, data) {
                    console.log("File " + file.name + "uploaded");
                    var logo_obj = $("<input id='standard_pic' name='standard_pic' style='display:none;' value='" + data.img_url + "' readonly/>");
                    $("#standard_pic_img").append(logo_obj);
                    $("#standard_pic_box").attr("src", data.img_url);
                    file.id = id;        // 换成服务端唯一的索引，可以后面删除对应的input
                    upload_imgs[file.id] = logo_obj;
                    id += 1;
                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                    upload_imgs[file.id].remove();
                });
            }
        });

        $("#dropz_product").dropzone({
            url: "{% url 'smErp:file_upload' %}",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            dictRemoveFile:"删除",
            maxFiles: 5,
            maxFilesize: 5,
            acceptedFiles: "image/*",
            init: function() {
                this.on("success", function(file, data) {
                    console.log(file);
                    console.log("File " + file.name + "uploaded");
{#                    this.addChildNode("<input value='" + file.name + "'/>");#}
                        var logo_obj = $("<input name='img' style='display:none;' value='" + data.img_url + "' readonly/>");
                        $("#dropz_product").append(logo_obj);
                        file.id = id;        // 换成服务端唯一的索引，可以后面删除对应的input
                        upload_imgs[file.id] = logo_obj;
                        id += 1;
                });
                this.on("removedfile", function(file) {
                    console.log(file);
                    console.log("File " + file.name + "removed");
                    upload_imgs[file.id].remove();
                });
            }
        });


        $("#productBtn").on("click", function(){
            var product_info = $("#form").serialize();
            console.log(product_info);
            $.post("{% url 'smErp:product_change' product.id %}", product_info,
                    function(data, status, xhr) {
                        if(status == "success") {
                            if(data.result == 0) {
                                // 提交品牌信息
{#                                alert(product_info);#}
                                // 切换状态
                                $("#set2").addClass("current");
                                $("#set1").removeClass("current");
                                $("#set1").addClass("complete");
                                $("#set1").children("div[class='step_inner']").children("i[class='icon_step']").html("");
                                $("#set1").children(".step_line").css("background-color", "#44b549");
                                // 改变进度 栏状态
                                $("#step1").hide();
                                $("#step2").show();
                            }else{
                                layer.msg(data.reason);
                            }
                        }else{
                            layer.msg(status);
                        }

                    },
            "json");
        });

        function upload_workflows_img(){
            console.log("进行点击操作");
            workflows_obj.removeAllFiles();
            $("#workflows_img").click();
        }

        function upload_standard_img(){
            console.log("进行点击操作");
            standard_obj.removeAllFiles();
            $("#standard_pic_img").click();
        }

    </script>
{% endblock %}




